Kurt Hsu's blog

The Rails developer in taiwan.


  • 首頁

  • 標籤

  • 分類

  • 歸檔

[CS50]2019哈佛大學程式課程Week0

發表於 2019-10-03 更新於 2020-10-02 分類於 CS50

前陣子跟同事聊天提到了國外知名CS50課程, 由於自己不是本科系一直有想法要補 computer science 的知識, 這個課程是免費的, 上完課做完全部作業之後可以選擇花錢買證書, 課程每年也都會更新, 提供的資源如下:

  • 2019年的CS50: 只有英文字幕
  • 導讀哈佛大學程式課程: 胡立的中文導讀
    注意: 中文導讀不確定是幾年的, 有可能會有些許對不上或順序不對, 但最後重點都會講到

系列文章:

  • [CS50]2019哈佛大學程式課程Week1
  • [CS50]2019哈佛大學程式課程Week2
  • [CS50]2019哈佛大學程式課程Week3
  • [CS50]2019哈佛大學程式課程Week4
  • [CS50]2019哈佛大學程式課程Week5
  • [CS50]2019哈佛大學程式課程Week6
  • [CS50]2019哈佛大學程式課程Week7
  • [CS50]2019哈佛大學程式課程Week8
  • [CS50]2019哈佛大學程式課程Week9

此系列文章比較偏向自己做簡單的筆記理解, 因為整個課程一個主題都會講得非常詳細, 建議大家還是去上課並且做功課

認識不同的進位制和 binary

10進位制

生活最平常的是10進位制

一位數由數字最低 0 一直 +1 到最高 9, 此時再 + 1 上去二位數就會 +1 並且剛剛的一位數從 0 算起

所以可以看作為
0008 + 1 = 0009
0009 + 1 = 0010
0010 + 1 = 0011
0011 + 1 = 0012

再來解剖一個擁有四位數並且10進位制的單位9527
=> 9x1000 + 5x100 + 2x10 + 7x1
=> 9527

2進位制

先來理解2進位制的計算方式

一位數由數字最低 0 一直 +1 到最高 1, 此時再 + 1 上去二位數就會 +1 並且剛剛的一位數從 0 算起

所以可以看作為
0000 + 1 = 0001
0001 + 1 = 0010
0010 + 1 = 0011
0011 + 1 = 0100

再來解剖一個擁有四位數並且2進位制的單位1101
=> 1x8 + 1x4 + 0x2 + 1x1
=> 13

為什麼會有2進位制這種東西–binary

我們可以想像最一開始要如何教電腦記住這些數字, 電腦沒有邏輯概念, 只有一格格的儲存體, 而每個儲存體裡面有四個燈泡, 他只能亮或不亮, 所以我們把燈泡沒亮代表 0, 燈泡亮了代表 1

這時候我們在把資訊存到電腦裡面, 跟他說
0000 燈泡一開始全部沒亮的時候代表 0
0001 燈泡先從最右邊開始亮一顆代表 1
0010 再亮過來一顆並且不亮一顆代表 2

以此類推每一個排列組合都儲存著一個資訊
而電腦最後只懂得這種儲存體, 他叫做 binary!!!!

當然後面為了要存更多更龐大的數字所以一個儲存體現在不只放一個燈泡, 可以放到 4個, 8個, 16個甚至到 64個, 所以有了 64bit 這個作業系統單位
可以參考這個文章:
16-bit Vs. 32-bit Vs. 64-bit: What Does it All Mean?

16進位制

有時候我們也需要直接寫 binary, 最常用的就是色卡, 例如白色是#FFFFFF, 這是什麼意思呢?
我們來認識 16進位制

假如我們需要的數字越來越大, 我們不可能寫 64位數代表一個東西, 這時 16進位制就產生了

先來理解16進位制的計算方式

一位數由數字最低 0 一直 +1 到最高 9, 此時再 + 1 上去為英文字母A, 再 + 1 上去為英文字母B, 一直到最高F代表15, 此時再 + 1 上去二位數就會 +1 並且剛剛的一位數從 0 算起

所以可以看作為
0009 + 1 = 000A
000A + 1 = 000B
000B + 1 = 000C
000C + 1 = 000D
000D + 1 = 000E
000E + 1 = 000F
000F + 1 = 0010

最後要記住: 這只是方便我們用短短的字母表示一長串的 binary, 但是電腦永遠都只讀得懂的 binary是一長串 01的東西, 所以 16進位的數字最終還是會被解析成 binary, 只是電腦有許多程式已經自動幫我們做好了

我們電腦看到的圖片, 影片是怎麼產生的呢?

剛剛在上面認識完進位制和 binary之後來理解圖片是如何產生的
首先一個顏色我們分三個要素 Red紅, Green綠, blue藍
而每個顏色我們從最深到最淺分256個等級, 再來利用 16進位制做區分
等級 0 => 00
等級 1 => 01
.
.
等級 105 => 69
等級 106 => 6A
等級 107 => 6B
.
.
等級 254 => FE
等級 255 => FF
所以 0 ~ 255 共有256個等級, 而色卡
#FF(r)FF(g)FF(b)
從左邊兩個位數數過來分別就是Red紅, Green綠, blue藍了

各種顏色就是利用這256個等級的RGB調配出來, 而這一格顏色我們稱之為 pixel(像素)

pixel(像素)越小越多則圖片畫質越好, 所以才會常常在買電視時說規格有幾千萬幾千萬的像素

說完了所有數字的處理, 但文字呢?

像我們打的每一個字元, 其實翻譯到電腦讀得懂的東西終究會是充滿一堆 01 的 binary, 而最一開始只有最簡單的英文字母需求, 所以就有了 ASCII code的產生, 可以參考維基百科:

ASCII 維基百科,自由的百科全書

當然現在 ASCII 已經遠遠無法滿足我們對字符的需求, 現在網站大多都通用到 UTF-8等等的編碼系統

這邊值得一提的是, 很多特殊字串符號–例如目前我們聊天 app 最常用的表情符號 emoji, 其實也是存在一個 binary裡面, 而他在 UTF-8 編碼系統最終被解析到電腦看得懂的 binary裡面大概長這樣:
11110000:10011111:10011000:10000010

binary 出處參考連結:
Unicode Character ‘FACE WITH TEARS OF JOY’ (U+1F602)

用 scratch去嘗試著寫程式

最後沒有寫過程式的可以用 scratch去玩玩看感覺, 這邊就不在多介紹了

小結

電腦永遠只讀得懂 binary, 而是我們利用不斷的抽象化為我們人類看得懂的東西才演變有 pixel, image, vedio, website, 最後產生像 scratch這種產品, 但永遠與電腦真真溝通的東西都會被解析為 binary, 然後電腦才給予回應

補充這些 computer science 真的是蠻有趣的, 不得不說不愧是國外很紅的程式課程, 其實他後面用C語言做了更多的示範和解說, 只不過程式方面的東西我比較懂就沒有想多做什麼筆記了

覺得這種教育真的不會有像台灣產學落差這麼大的斷層, 我真的相信這堂課的學生認真吸收完要入這行真的是輕鬆很多, 不過老實說這門課肯定不好過XD

# CS50
[Rails]非常方便的搭配window.open開啟遊覽器新視窗
[CS50]2019哈佛大學程式課程Week1
  • 文章目錄
  • 本站概要

Kurt Hsu

Progress One Percent Every Day
171 文章
55 分類
163 標籤
RSS
  1. 1. 認識不同的進位制和 binary
    1. 1.0.1. 10進位制
    2. 1.0.2. 2進位制
    3. 1.0.3. 為什麼會有2進位制這種東西–binary
    4. 1.0.4. 16進位制
  • 2. 我們電腦看到的圖片, 影片是怎麼產生的呢?
  • 3. 說完了所有數字的處理, 但文字呢?
  • 4. 用 scratch去嘗試著寫程式
  • 5. 小結
  • © 2020 Kurt Hsu
    由 Hexo 強力驅動 v3.8.0
    |
    主題 – NexT.Muse v7.3.0